home *** CD-ROM | disk | FTP | other *** search
/ Amiga Plus Extra 1997 #1 / Amiga Plus Extra 1997 #1.iso / programme / netz / awdpal / helpdocs / formatting < prev    next >
Encoding:
Text File  |  1997-01-01  |  5.2 KB  |  121 lines
  1. Back to MENU
  2. Back to TUTORIAL
  3. Back to SET_UP
  4.  
  5.                         Formatting a document
  6.                         ---------------------
  7.  
  8. In this tutorial, we will construct the basics of an HTML document.
  9. Remember, to return to the previously referred to "Tutorial"
  10. documentation, click on the "AWebEd" icon above.
  11.  
  12. 1 - Select "Project...New" from the pull-down menus. (Use right
  13.     mouse button to select pull down menus)
  14.  
  15. 2 - Click in the main window.  Position the cursor in the top-left
  16.     of the window.  We are about to add some HTML codes; this will
  17.     display the documentation for those codes - once you have read
  18.     that documentation, click on the "AWebEd" icon to return here.
  19.  
  20. 3 - Double-click on the TEMPLATE item in the "Simple" command list.
  21.     This provides the essential portions of an HTML document (see
  22.     TEMPLATE ).  It may be necessary to use the scroll bars and
  23.     arrows to the immediate right of the command list to find the
  24.     appropriate item.
  25.  
  26. 4 - Move the cursor to the third line, which should contain the
  27.     <TITLE> codes.  Move the cursor inbetween the <TITLE> and
  28.     </TITLE> codes.
  29.  
  30. 5 - Now type in the following: AWebEd Homepage
  31.  
  32. 6 - Double click on the RELOAD item under the AREXX command list.
  33.  
  34. 6 - Cycle through the screens ([left amiga]-m).  AWebEd should now
  35.     display your HTML document.  Note the new title in the window
  36.     title bar. Cycle back to AWebEd.
  37.  
  38. 7 - Move the cursor to the portion of asterisked test, which should
  39.     read: *Insert body here*.  Note that this text lies in between
  40.     the <BODY> and </BODY> delimiters.  The Body, remember, contains
  41.     that code which is displayed in the browser window.
  42.  
  43. 8 - Delete the asterisked text , and replace it with:
  44.     AWEBED HOMEPAGE
  45.  
  46. 9 - SELECT the text by moving the pointer to the start of the text
  47.     you have just typed, and pressing BUT NOT RELEASING the left
  48.     mouse button.  You will see the pointer change shape.  Whilst
  49.     depressing the left button, move the pointer to the end of the
  50.     text.  Then release the button.  The text is now selected.
  51.     Double click on the item "Header (Large".  The tags <H1> and
  52.     <H2> will now be inserted either side of the selected text.
  53.  
  54. 10 - Click on RELOAD again.  Cycle through to AWeb.  AWeb should now
  55.      display the text in a large size.  Cycle back to AWebEd.
  56.  
  57. 11 - Position the cursor on the line below the codes for the
  58.      HEADER you have just created.  Make sure that the cursor is
  59.      above the </BODY> code - you may want to press the return key a
  60.      few times to generate some space in your HTML document -
  61.      remember that this will not show up as space when displayed on
  62.      a WWW browser.
  63.  
  64. 12 - Double-click on the " HORZ_RULE " item in the Simple command
  65.      list.  This will insert the code <HR> at the position of the
  66.      cursor.  RELOAD the document into AWeb, and cycle to AWeb to
  67.      see what you have added.  Cycle back again to AWebEd.
  68.  
  69. 13 - Position the cursor below the <HR> code.  Now go to the
  70.      "Edit...Insert" pulldown menu item.  Select the file
  71.      "Example.txt" and load it in by clicking on "OK".
  72.  
  73. 14 - Reload the document into AWeb again, and have a look at it.
  74.      As is obvious, it is just an ugly looking chunk of text.  Now
  75.      to smarten it up!
  76.  
  77. 15 - Move back to the top of the code, and SELECT the text from (and
  78.      including) "Back to MENU" all the way to the end of the
  79.      underlining beneath "Introduction".  Cut that text from the
  80.      document by selecting Edit...Cut from the PULLDOWN menus.
  81.  
  82. 16 - The first line of text after the <HR> code should now read:
  83.         "What is AWebEd?:"
  84.      Select that line of text, and double click on the "Header
  85.      (medium)" item from the "Simple" command list.  This is
  86.      essentially the same operation as we with the last header.
  87.  
  88. 17 - Position the cursor on the line before the first paragraph,
  89.      and double click on the "New Paragraph" item in the "Simple"
  90.      command list.  The code indicates that the following text is a
  91.      coherent chunk of text.
  92.  
  93. 18 - Now select the line which reads:
  94.         "Features:"
  95.      SELECT it, and make it a medium header, as you did before.
  96.  
  97. 19 - Reload the document into AWeb and have another look.  Still
  98.      very garbled - time to structure it better.
  99.  
  100. 20 - Move the cursor to the line beneath the "Features" header.
  101.      Double click on the "Unordered list" item in the
  102.      "Miscellaneous" command list.  Five codes will be inserted.
  103.      The first, <UL> signifies the start of an unordered list.  The
  104.      following three codes, each <LI>, signify the start of an item
  105.      in the list.  The final code, </UL> signifies the end of the
  106.      list.
  107.  
  108. 21 - Now select the first indented paragraph of the inserted text,
  109.      making sure NOT to selected the preceding "-".  Cut it, and
  110.      then position the cursor at the end of the first line
  111.      containing an <LI> code.  Now select Edit...Paste from the
  112.      PULLDOWN menus.
  113.  
  114. 22 - Repeat this procedure for the rest of the indented paragraphs.
  115.      You will need to add two or three extra <LI> codes on top of
  116.      the ones alreay provided.  Remember to add them BEFORE the
  117.      </UL> code.
  118.  
  119. 23 - Now reload the document into AWeb.  If should look much better!
  120.      You may wish to space out each item of the list by adding a <P>
  121.      code before each <LI> code.